﻿


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">简单用法</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-simple" lay-filter="test-table-totalRow"></table>


                    <script type="text/html" id="test-table-switchTpl">
                        <!-- 这里的 checked 的状态只是演示 -->
                        <input type="checkbox" name="sex" lay-skin="switch" lay-text="女|男" lay-filter="test-table-sexDemo"
                               value="{{ d.sex }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.sex == '女' ? 'checked' : '' }}>
                    </script>
                    <script type="text/html" id="test-table-totalRow-toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                        </div>
                    </script>
                    <script type="text/html" id="test-table-toolbar-barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="~/layui/layui.js"></script>
<script type="text/javascript">
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;


        //第一个实例
        table.render({
            id: 'idtest',
            elem: '#test-table-simple'
            , height: 512
            // , width:1000
            // , url: '/Home/tableData1' //数据接口
            //  , method: 'get'
            // , contentType: 'contentType:"application/jso"'
            , where: {
                id: 123,
                code: "sasasas"
            }
            , defaultToolbar: ['filter', 'exports']
            , request: {
                pageName: 'curr' //页码的参数名称，默认：page
                , limitName: 'nums' //每页数据量的参数名，默认：limit

            }
            , toolbar: '#test-table-totalRow-toolbarDemo'
            , page: true //开启分页
            , totalRow: true
            , skin: 'row' //表格风格
            , even: true //隔行背景
            , cols: [[

                { type: 'checkbox', fixed: 'left', rowspan: 2 }
                , { field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计', rowspan: 2 }
                , { title: '用户信息', colspan: 10, align: 'center' } //colspan:10, rowspan:2
            ], [ //表头
                { field: 'username', title: '用户名', width: 80 }
                , { field: 'sex', title: '性别', width: 80, sort: true, templet: '#test-table-switchTpl', unresize: true }
                , { field: 'city', title: '城市', width: 80 }
                , { field: 'sign', title: '签名', width: 177, hide: true }
                , { field: 'experience', title: '积分', width: 80, sort: true, totalRow: true }
                , { field: 'score', title: '评分', width: 80, sort: true }
                , { field: 'classify', title: '职业', width: 80, style: 'background-color: #009688; color: #fff;' }
                , { field: 'wealth', title: '财富', width: 135, sort: true }
                , { title: '操作', toolbar: '#test-table-toolbar-barDemo', fixed: 'right', width: 150 }
            ]]
            //, jump: function (res, curr, count) {
            //    debugger;
            //    console.log(res);

            //    //得到当前页码
            //    console.log(curr);

            //    //得到数据总量
            //    console.log(count);
            //}
        });

        //不通过URL  ajax 请求到数据 再重载方式  分页事件上面 jump
        $.ajax({
            url: '/Home/tableData1',
            type: 'get',
            success: function (data) {
                debugger;
                if (data.status == 'error') {
                    layer.msg(data.msg, { icon: 5 });//失败的表情
                    o.removeClass('layui-btn-disabled');
                    return;
                } else {
                    table.reload('idtest', {
                        data: data.data
                    });
                }
            }
        });

        //头工具栏事件
        table.on('toolbar(test-table-totalRow)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test-table-totalRow)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.username
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });

        //监听行单击事件
        //table.on('row(test-table-totalRow)', function (obj) {
        //    console.log(obj.tr) //得到当前行元素对象
        //    console.log(obj.data) //得到当前行数据

        //    layer.alert("单击"+JSON.stringify(obj.data));
        //});

        //监听行双击事件
        table.on('rowDouble(test-table-totalRow)', function (obj) {
            //obj 同上
            layer.alert("双击" + JSON.stringify(obj.data));
        });



    });
</script>